<template>
  <div class="chat-box" ref="chatBox">
    <div v-for="(msg, index) in messages" :key="msg.vueVirtualUUID" class="message">
      <div v-if="msg.role === dicts.chatMessageRoleEnum.user" class="user-message message-parent">
        <el-tooltip class="item" effect="light" placement="bottom-end">
          <div class="message-content user-message-content">
            <div style="font-weight:400;font-size: 14px;" v-html="compiledMarkdown(msg.content)"></div>
          </div>
          <div slot="content" class="mini-padding fixed-width">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="deleteMessage(msg,index,$event)"
            >删除</el-button>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-copy-document"
              @click="copyMessage(msg.content,$event)"
            >复制</el-button>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-arrow-down"
              @click="handleAskAgain(msg.content,$event)"
            >再问</el-button>
          </div>
        </el-tooltip>
        <img :src="msg.avatar" alt="User" class="avatar" />
      </div>
      <div v-if="msg.role === dicts.chatMessageRoleEnum.assistant" class="bot-message message-parent">
        <img :src="msg.avatar" alt="Bot" class="avatar" />
        <!-- 显示加载状态 -->
        <span v-if="msg.loading">正在思考中...</span>
        <el-tooltip  v-else  class="item" effect="light" placement="bottom-end">
          <div class="message-content bot-message-content" >
            <div style="font-weight:400;font-size: 14px;" v-html="compiledMarkdown(msg.content)"></div>
          </div>
            <div slot="content" class="mini-padding fixed-width">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-copy-document"
                @click="copyMessage(msg.content,$event)"
              >复制</el-button>
            </div>
        </el-tooltip>
      </div>
    </div>
  </div>
</template>
<script>
import handleClipboard from 'sks-plugin-el-erp/lib/clipboard'
import MarkdownIt from 'markdown-it'
const md = new MarkdownIt()

export default {
  name: "Chat",
  components: {
  },
  props: {
    messages: {
      type: Array,
      default: null,
    },
  },
  data() {
    return {
    }
  },
  computed: {

  },
  // watch: {
  //   messages: {
  //     handler(newVal, oldVal) {
  //       console.log('myObject changed:', newVal, oldVal);
  //       this.$forceUpdate()
  //     },
  //     deep: true,
  //     immediate: true
  //   }
  // },
  filters: {
  },
  methods:{
    compiledMarkdown(msg){
      return md.render(msg);;
    },
    scrollToBottom() {
      this.$nextTick(() => {
        this.$refs.chatBox.scrollTop = this.$refs.chatBox.scrollHeight;
      });
    },
    copyMessage(content,event) {
      handleClipboard(content,event)
      // this.$message.success('消息已复制到剪贴板');
    },
    deleteMessage(msg,index) {
      this.$modal.confirm('是否删除该条消息？').then(() => {
        this.$emit("delete", msg,index);
        //删除我的问题,同时删除bot的回答
        // this.messages.splice(index, 2);
      }).catch(() => {});
    },
    //这是消息到发输入框
    handleAskAgain(msg){
      this.$emit("ask-again", msg);
    }
  }
};

</script>


<style scoped lang="scss">
.chat-box {
  height: calc(100vh - 300px);
  overflow-y: auto;
  padding: 20px;
  border-bottom: 1px solid #dcdfe6;
}
.message {
  margin: 10px 0;
  display: flex;
  align-items: center;
}
.user-message {
  margin-top: 2px;
  display: flex;
  align-items: center;
  justify-content: flex-end; /* 用户消息右对齐 */
  width: 100%; /* 确保消息容器占满宽度 */
  position: relative;
}
.bot-message {
  margin-top: 2px;
  display: flex;
  align-items: center;
}
.avatar {
  border-radius: 50%;
  margin-left: 10px; /* 将头像的右边距改为左边距 */
  width: 50px;
  height: 50px;
}
.message-parent{
  padding-left: 10px;
  padding-right: 10px;
}
.message-content {
  max-width: 80%; /* 减少消息框的最大宽度 */
  background-color: #f0f0f0;
  border-radius: 10px; /* 增加圆角 */
  padding: 12px; /* 增加内边距 */
  overflow-wrap: break-word;
  white-space: normal;
  word-wrap: break-word;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 添加阴影 */
}
.user-message-content {
  background-color: #d1e7dd;
  align-self: flex-end; /* 用户消息靠右对齐 */
}
.bot-message-content {
  background-color: #cfe2ff;
}
.action-icons {
  display: none;
  position: absolute;
  right: 60px;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 5px;
  padding: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.user-message:hover .action-icons {
  display: flex;
}
.icon {
  margin: 0 5px;
  cursor: pointer;
  color: #606266;
}
.icon:hover {
  color: #409EFF;
}


.mini-padding {
  .cell {
    padding-left: 3px;
    padding-right: 3px;
  }
}
.fixed-width {
  .el-button--mini {
    padding: 3px 3px;
    width: 40px;
  }
}
</style>
